<template>

  <div class=""  >
    <!--<div class="pageContainer text">-->
      <!--<h1>Company dynamics</h1>-->
      <!--<div class="line"></div>-->
      <!--<div class="name">{{$t('common.CompanyDynamics')}}</div>-->
    <!--</div>-->
  </div>



  <div class="pageContainer newsCont">
    <div class="title">{{pageData.title}}</div>

    <div class="category">
      <span>发布时间：{{pageData.newsDate}}</span> 类型：{{pageData.category}}
    </div>

    <div class="detailContent" v-html="pageData.content"></div>



    <div class="moreNews">
      <div class="left">
        <div class="item" @click="showDetail(pageData.lastNews.id)">
          上一条：{{pageData.lastNews.title || '无'}}
        </div>
        <div class="item"  @click="showDetail(pageData.nextNews.id)">
          下一条：{{pageData.nextNews.title || '无'}}
        </div>
      </div>
      <div class="right" @click="goList">
        返回列表
      </div>
    </div>
  </div>

</template>

<script setup>
  import {ref, onMounted, watch} from 'vue'
  import {getNewContentById} from '@/api/index.js'
  import {useRouter, useRoute} from 'vue-router'
  import { UTILS_Tool } from '@/utils/index.js'
  const { routerLink } = UTILS_Tool()
  const router = useRouter()
  const route = useRoute()

  const pageData = ref({
    nextNews: {},
    lastNews: {}
  })
  onMounted(() => {
    getData()
  })

  watch(() => route.query.id, () => {
    getData()
  })


  const getData = () => {
    getNewContentById({id: route.query.id}).then((res) => {
      pageData.value = res

      pageData.value.nextNews = res.nextNews || {}
      pageData.value.lastNews = res.lastNews || {}

    })
  }

  const showDetail = (id) =>  {
    if (id) {
      routerLink('/detail', {id: id})
    }
  }

  const goList = () => {
    routerLink('/news')
  }
</script>
<style lang="scss">
  .detailContent {
    img {
      max-width: 100% !important;
    }
  }
</style>
<style scoped lang="scss">
  /*.banner {*/
    /*background: url('../../assets/images/news.png');*/
    /*background-size: 100% 100%;*/
  /*}*/

  @media screen and (max-width: 1079px) {

    .newsCont {
      padding-bottom: 50px;
      .title {
        font-size: 18px;
        font-weight: 600;
        margin-top: 20px;
      }
      .category {
        font-size: 14px;
        border-bottom: 1px solid #ddd;
        line-height: 40px;
        margin-bottom: 10px;
        span {
          margin-right: 15px;
        }
      }
      .detailContent{
        width: 100%;
      }

      .moreNews{
        border-top: 1px solid #ddd;  font-size: 14px; padding-top: 10px; margin-top: 10px;
        .right{
          font-size: 12px; border: 1px solid #ccc; padding: 10px 0px; text-align: center; border-radius: 30px;  width: 100px; margin: 10px auto 0;
        }
        .left{
          flex: 1;
          .item{
            color: #1027EF; line-height: 20px; padding: 3px 0; cursor: pointer;
          }
        }
      }

    }
  }

  @media screen and (min-width: 1080px) {

    .newsCont {
      margin-top: 6vw; padding-bottom: 5vw;
      .title {
        font-size: 1.8vw;
        font-weight: 600;
        margin-top: 3vw;
      }
      .category {
        font-size: 1vw;
        padding-top: 1vw;
        border-bottom: 0.1vw solid #ddd;
        line-height: 3vw;
        margin-bottom: 1vw;
        span {
          margin-right: 2vw;
        }
      }
      .detailContent{
        width: 960px; margin: 0 auto; padding-top: 1vw;
      }

      .moreNews{
        border-top: 1px solid #ddd;  font-size: 1vw; display: flex; padding-top: 1vw; align-items: center;
        justify-content: space-between;
        .right{
          font-size: 0.8vw; border: 1px solid #ccc; padding: 1vw 2vw; border-radius: 3vw; cursor: pointer;
        }
        .left{
          flex: 1;padding-right: 1vw;
          .item{
            color: #1027EF; line-height: 1.8vw; padding: 0.2vw 0; cursor: pointer;
          }
        }
      }
    }
  }


</style>
